<template>
  <a-card :bordered="false">
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
          <a-col :md="8" :sm="8">
            <a-form-item label="配置名称" :labelCol="{span: 6}" :wrapperCol="{span: 14, offset: 1}">
              <j-input placeholder="请输入配置名称" v-model="queryParam.configName"></j-input>
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="8">
            <a-form-item label="数据源名称" :labelCol="{span: 6}" :wrapperCol="{span: 14, offset: 1}">
              <a-select allowClear placeholder="请选择数据源" v-model="queryParam.dataSource" :getPopupContainer="trigger => trigger.parentNode">
                  <a-select-option  :value="item.code" :key="item.id" v-for="item in dataSourceList">
                    {{ item.name }}
                  </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <!-- <a-col :md="6" :sm="8">
            <a-form-item label="所属专题" :labelCol="{span: 6}" :wrapperCol="{span: 14, offset: 1}">
              <a-tree-select
                allowClear
                multiple
                placeholder="请选择所属专题"
                style="width: 100%;"
                :replaceFields="replaceFields"
                :dropdownStyle="{ maxHeight: '200px', overflow: 'auto' }"
                :treeData="topicTypes"
                v-model="queryParam.topicTypes"
              >
              </a-tree-select>
            </a-form-item>
          </a-col> -->
          <a-col :md="6" :sm="8">
            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
              <a-button type="primary" @click="beforeSearchQuery" icon="search">查询</a-button>
              <a-button type="primary" @click="searchResetBefore" icon="reload" style="margin-left: 8px">重置</a-button>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <!-- 查询区域-END -->
    <!-- 操作按钮区域 -->
    <div class="table-operator">
      <a-button @click="handleAdd" type="primary" icon="plus">新增</a-button>
      <!-- 高级查询区域 -->
      <j-super-query :fieldList="superFieldList" ref="superQueryModal" @handleSuperQuery="handleSuperQuery"></j-super-query>
      <a-dropdown v-if="selectedRowKeys.length > 0">
        <a-menu slot="overlay">
          <a-menu-item key="1" @click="batchDel"><a-icon type="delete"/>删除</a-menu-item>
        </a-menu>
        <a-button style="margin-left: 8px"> 批量操作 <a-icon type="down" /></a-button>
      </a-dropdown>
    </div>
    <!-- table区域-begin -->
    <div>
      <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
        <i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择 <a style="font-weight: 600">{{ selectedRowKeys.length }}</a>项
        <a style="margin-left: 24px" @click="onClearSelected">取消勾选</a>
      </div>
      <a-table
        ref="table"
        size="middle"
        :scroll="{x:true}"
        bordered
        rowKey="id"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
        class="j-table-force-nowrap"
        @change="handleTableChange">
        <span slot="dimensionInfoVoList" slot-scope="dimensionInfoVoList">
          <a-tag
            style="font-size: 14px; margin-top: 5px"
            v-for="(topic, index) in dimensionInfoVoList"
            :key="index"
            color="blue"
          >{{ topic.name }}</a-tag
          >
        </span>
        <div style="max-width:250px;" slot="indexInfoVoList" slot-scope="indexInfoVoList">
          <a-tag
            :title="topic.name"
            style="font-size: 14px; margin-top: 5px;float:left;max-width:100%;text-overflow: ellipsis;overflow: hidden; white-space: nowrap;"
            v-for="(topic, index) in indexInfoVoList"
            :key="index"
            color="blue"
          >{{ topic.name }}</a-tag>
        </div>
        <!-- 状态渲染模板 -->
        <template slot="status" slot-scope="status">
          <a-tag v-if="status==0" color="red">停用</a-tag>
          <a-tag v-if="status==1" color="green">启用</a-tag>
        </template>
        <span slot="action" slot-scope="text, record">
          <a @click="handleEdit(record.id)">编辑</a>
          <a-divider type="vertical" />
          <a-dropdown>
            <a class="ant-dropdown-link">更多 <a-icon type="down" /></a>
            <a-menu slot="overlay">
              <a-menu-item>
                <a @click="handleDetail(record.id)">详情</a>
              </a-menu-item>
              <a-menu-item>
                <a-popconfirm placement="topLeft" title="确定删除吗?" @confirm="() => handleDelete(record.id)">
                  <a>删除</a>
                </a-popconfirm>
              </a-menu-item>
            </a-menu>
          </a-dropdown>
        </span>
      </a-table>
    </div>
    <sc-situation-index-config-modal ref="modalForm" @ok="modalFormOk" @close="addDialogFlag=false" v-if="addDialogFlag"></sc-situation-index-config-modal>
    <IndexConfigEditModal
      ref="indexConfigEditModal"
      @ok="modalFormOk"
      @close="editDialogFlag=false"
      v-if="editDialogFlag"
    />
  </a-card>
</template>

<script>
import { getAction } from '@/api/manage'
import '@/assets/less/TableExpand.less'
import { mixinDevice } from '@/utils/mixin'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import ScSituationIndexConfigModal from './modules/ScSituationIndexConfigModal'
import IndexConfigEditModal from './modules/IndexConfigEditModal'
// changeTopicType
export default {
  name: 'ScSituationIndexConfigList',
  components: {
    ScSituationIndexConfigModal,
    IndexConfigEditModal
  },
  mixins: [JeecgListMixin, mixinDevice],
  data() {
    return {
      topicType: null,
      replaceFields: {
        children: 'childList',
        title: 'catalogName',
        key: 'id',
        value: 'id'
      },
      topicTypes: [],
      dataSourceList: [],
      description: '指标配置表管理页面',
      // 表头
      columns: [
        {
          title: '#',
          dataIndex: '',
          key: 'rowIndex',
          width: 60,
          align: 'center',
          customRender: function(t, r, index) {
            return parseInt(index) + 1
          }
        },
        {
          title: '配置名称',
          align: 'center',
          dataIndex: 'configName'
        },
        {
          title: '数据源',
          align: 'center',
          dataIndex: 'dataSource_dictText'
        },
        {
          title: '创建方式',
          align: 'center',
          dataIndex: 'configType_dictText'
        },
        {
          title: '维度',
          align: 'center',
          dataIndex: 'dimensionInfoVoList',
          scopedSlots: { customRender: 'dimensionInfoVoList' }
        },
        {
          title: '关联指标',
          align: 'center',
          dataIndex: 'indexInfoVoList',
          scopedSlots: { customRender: 'indexInfoVoList' }
        },
        {
          title: '备注',
          align: 'center',
          dataIndex: 'remark'
        },
        {
          title: '状态',
          align: 'center',
          dataIndex: 'status',
          scopedSlots: { customRender: 'status' }
        },
        {
          title: '编辑人',
          align: 'center',
          dataIndex: 'updateBy'
        },
        {
          title: '编辑时间',
          align: 'center',
          dataIndex: 'updateTime'
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: 'center',
          fixed: 'right',
          width: 147,
          scopedSlots: { customRender: 'action' }
        }
      ],
      url: {
        list: '/index/config/listConfig',
        delete: '/index/scSituationIndexConfig/delete',
        deleteBatch: '/index/scSituationIndexConfig/deleteBatch',
        exportXlsUrl: '/index/scSituationIndexConfig/exportXls',
        importExcelUrl: 'index/scSituationIndexConfig/importExcel'

      },
      dictOptions: {},
      superFieldList: [],
      addDialogFlag: false,
      editDialogFlag: false
    }
  },
  computed: {
    importExcelUrl: function() {
      return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`
    }
  },
  created() {
    this.getDataSourceList()
    this.getSuperFieldList()
    this.getTopicTypes()
  },
  methods: {
    changeTopicType(val) {
      this.topicType = val.id
      this.beforeSearchQuery()
    },
    beforeSearchQuery() {
      // this.queryParam.topicType = this.topicType
      this.searchQuery()
    },
    getTopicTypes() {
      this.topicTypes = []
      getAction('/index/config/queryIndexCatalog', {}).then((res) => {
        if (res.success) {
          this.topicTypes = res.result
        }
      })
    },
    searchResetBefore() {
      this.$refs.superQueryModal.handleReset()
      this.searchReset()
    },
    getDataSourceList() {
      this.dataSourceList = []
      getAction('/sys/dataSource/list', { pageNo: 1, pageSize: 10000 }).then((res) => {
        if (res.success) {
          res.result.records.map(item => {
            if (item.dbStatus === '1') this.dataSourceList.push(item)
          })
        }
      })
    },
    handleAdd() {
      this.addDialogFlag = true

      this.$nextTick(() => {
        this.$refs.modalForm.add()
        this.$refs.modalForm.title = '新增'
        this.$refs.modalForm.disableSubmit = false
      })
    },
    handleEdit(id) {
      this.editDialogFlag = true

      this.$nextTick(() => {
        this.$refs.indexConfigEditModal.edit(id)
      })
    },
    handleDetail(id) {
      this.editDialogFlag = true

      this.$nextTick(() => {
        this.$refs.indexConfigEditModal.show(id)
      })
    },
    modalFormOk() {
      this.addDialogFlag = false
      this.editDialogFlag = false
      // 新增/修改 成功时，重载列表
      this.loadData()
      // 清空列表选中
      this.onClearSelected()
    },
    initDictConfig() {
    },
    getSuperFieldList() {
      const fieldList = []
      fieldList.push({ type: 'string', value: 'configName', text: '配置名称', dictCode: '' })
      fieldList.push({ type: 'string', value: 'dataSource', text: '数据源', dictCode: 'sys_data_source,name,code' })
      fieldList.push({ type: 'string', value: 'configType', text: '创建方式', dictCode: 'index_type' })
      // fieldList.push({ type: 'Text', value: 'configData', text: '配置数据', dictCode: '' })
      // fieldList.push({ type: 'Text', value: 'configSql', text: '配置数据库语句', dictCode: '' })
      fieldList.push({ type: 'string', value: 'remark', text: '备注', dictCode: '' })
      fieldList.push({ type: 'string', value: 'status', text: '状态', dictCode: '' })
      this.superFieldList = fieldList
    }
  }
}
</script>
<style scoped>
  @import '~@assets/less/common.less';
</style>
